<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-tree
          :data="data"
          :props="props"
          node-key="_id"
          highlight-current=true
          default-expand-all=true
          accordion
          @node-click="handleNodeClick">
        </el-tree>
      </el-col>
      <el-col :span="16">
        <span style="float:left" v-html="content"></span>
        <el-card v-for="img in dimgs" v-bind:key="img">
          <img :src="`/api/static/imgs/${img}`" class="image">
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<script>

import http from '../http'

export default {
  name: 'Book',
  data() {
    return {
      data: {},
      content: '',
      dimgs: [],
      props: {
        children: 'son',
        label: 'name'
      }
    }
  },
    methods: {
      getBotn(){
        console.log(this.$route.query._id)
        http.post(
          '/botn', 
          {'_id': this.$route.query._id}
        ).then(response => (
        this.data = [response.data.data]
      ))
    },
    getContent(_id){
        http.post(
          '/content', 
          {'_id': _id}
        ).then(response => (
        this.content = response.data.data.content,
        this.dimgs = response.data.data.dimgs
      ))
    },
    handleNodeClick(data) {
        if (data.type === 'chapter'){
            this.getContent(data._id)
        }
      }
  },
  created() {
    this.getBotn()
  }
  }
</script>

<style>
  .el-tree .el-tree-node__label {
    font-size: 1em;
    width: 2em;
    height: 1em;
  }
  .el-row {
    margin: 2em;
  }
  .el-col {
    border-radius: 0.1em;
  }

  .time {
    font-size: 1em;
    color: #999;
  }

  #ct {
    float: left;
  }
</style>
